<template>
  <div>
    <headers></headers>
    <div class="introduce min-width" v-loading="loading">
      <div class="banner"><img class="banner-img" :src="banner.banner"></div>
      <div class="contactway">
        <div class="contact">
          <p class="contact-title">{{$t('message.Contactus')}}</p>
          <p class="contact-content">{{$t('message.Companynewscontent')}}</p>
        </div>
        <div class="contactway-bottom">
          <div class="box-list clear">
            <div class="list fl" v-for="item in contact" :key="item.id">
              <img class="item-img" :src="item.img_src">
              <p class="item-title">{{item.heading}}</p>
              <p class="item-content" :class="{itemcontentss:item.is_bold==1}">{{item.content}}</p>
              <p class="item-contents">{{item.desc}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="enterprise-img"><img :src="banner.ad_banner"></div>
      <div class="channel">
        <div class="channel-top">
          <p class="channel-title">{{$t('message.Ourdistributors')}}</p>
          <i class="channel-i"></i>
        </div>
        <div class="channel-bottom clear">
          <div class="channel-bottom-img fl" v-for="item in channel" :key="item.id">
            <img @click="channels(item.link)" :src="item.img_src">
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import axios from 'axios'
  import headers from "@/components/pc/public/header"

  export default {
    name: 'introduce',
    components: {
      headers
    },
    data() {
      return {
        lang: 'en',  //语言
        banner: {},
        contact: [],
        channel: [],
        loading: true //加载
      }
    },
    //钩子函数
    created() {
      if (sessionStorage.sitename) {
        this.lang = sessionStorage.sitename;
      }
      this.init()
    },
    methods: {
      // 请求数据
      init() {
        axios.get('introduction/api/get_introduction', {
          params: {
            language: this.lang
          }
        }).then((response) => {
          console.log(response)
          this.banner = response.data;
          this.contact = response.data.contact;
          this.channel = response.data.channel;
          this.loading = false;
        })
          .catch(function (error) {
            console.log(error);
          });
      },
      channels(url){
        if(url.substr(0,7).toLowerCase() == "http://" || url.substr(0,8).toLowerCase() == "https://"){
          window.open(url)
        }else
          window.open('http://'+ url)
      },
    }
  }
</script>
<style scoped>
  .introduce .banner {
    max-width: 100%;
    max-height: 720px;
    overflow: hidden;
  }

  .introduce .banner .banner-img {
    width: 100%;
    height: auto;
  }

  .introduce .contactway .contact {
    height: 148px;
    padding-top: 48px;
    text-align: center;
  }

  .introduce .contactway .contact .contact-title {
    font-size: 30px;
    color: #030303;
  }

  .introduce .contactway .contact .contact-content {
    font-size: 14px;
    color: #030303;
    margin-top: 10px;
  }

  .introduce .contactway .contactway-bottom {
    background: #f5f5f5;
    padding: 30px 0 48px 0;
  }

  .introduce .contactway .contactway-bottom .box-list {
    width: 1198px;
    margin: 0 auto;
  }

  .introduce .contactway .contactway-bottom .box-list .list {
    width: 350px;
    height: 468px;
    background: #fff;
    padding-top: 104px;
    text-align: center;
    margin-right: 74px;
  }

  .introduce .contactway .contactway-bottom .box-list .list:nth-child(3) {
    margin-right: 0;
  }

  .introduce .contactway .contactway-bottom .box-list .list .item-img {
    margin: 0 auto;
  }

  .introduce .contactway .contactway-bottom .box-list .list .item-title {
    font-size: 20px;
    color: #030303;
    margin-top: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .introduce .contactway .contactway-bottom .box-list .list .item-content {
    font-size: 14px;
    line-height: 25px;
    color: #030303;
    padding-top: 30px;
    width: 300px;
    display: inline-block;
    margin: 0 auto;
  }

  .itemcontentss {
    font-weight: bold;
    font-size: 20px !important;
    width: 300px !important;
  }

  .introduce .contactway .contactway-bottom .box-list .list .item-contents {
    font-size: 14px;
    margin-top: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .introduce .enterprise-img {
    max-width: 100%;
    max-height: 1244px;
    overflow: hidden;
  }

  .introduce .enterprise-img img {
    width: 100%;
    height: auto;
  }

  .introduce .channel {
    padding: 56px 0 70px 0;
    border-bottom: 1px solid #e8e8e8;
  }

  .introduce .channel .channel-top {
    text-align: center;
    margin-bottom: 30px;
  }

  .introduce .channel .channel-top .channel-title {
    font-size: 30px;
    color: #000;
    letter-spacing: 2px;
  }

  .introduce .channel .channel-top .channel-i {
    display: inline-block;
    height: 1px;
    width: 60px;
    background: #e8e8e8;
  }

  .introduce .channel .channel-bottom {
    width: 803px;
    height: 181px;
    margin: 0 auto;
  }

  .introduce .channel .channel-bottom .channel-bottom-img {
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    width: 180px;
    height: 90px;
    overflow: hidden;
    cursor: pointer;
  }

  .introduce .channel .channel-bottom .channel-bottom-img img {
    width: 100%;
    min-height: 100%;
  }

  .introduce .channel .channel-bottom .channel-bottom-img:nth-child(4n+4) {
    border-right: none;
  }

  .introduce .channel .channel-bottom .channel-bottom-img:nth-child(5) {
    border-bottom: none;
  }

  .introduce .channel .channel-bottom .channel-bottom-img:nth-child(6) {
    border-bottom: none;
  }

  .introduce .channel .channel-bottom .channel-bottom-img:nth-child(7) {
    border-bottom: none;
  }

  .introduce .channel .channel-bottom .channel-bottom-img:nth-child(8) {
    border-bottom: none;
  }
</style>
